<!--
 * @Descripttion: 
 * @version: 
 * @Author: weni09
 * @Date: 2021-04-19 13:54:39
 * @LastEditors: weni09
 * @LastEditTime: 2021-06-11 19:06:40
 * @FilePath: \icoder-frontend\blog\src\components\Category.vue
-->
<template>
			<div class="text item-category side-card">
			<el-card class="box-card">
				<div slot="header" class="align-items-center clearfix">
				    <span class="iconfont icon-leimupinleifenleileibie2 icon-category"> {{$t('category.name')}}</span>
				</div>
				<ul class="ul-category d-flex">
                    <li class="category-li d-flex" v-for="(item,index) in categories" :key="index" @click="clickSendInfo($event)">
						<p class="d-flex" :title="getCategoryTittle(item.art_total)"><span class="iconfont icon-sanx-up"></span>
						<router-link class="category-link d-flex" :to="`/articles/category/${item.slug}`">{{ item.name }}</router-link></p>
						<el-badge :value="item.art_total" class="badge"></el-badge>
					</li>
                </ul>
			</el-card>
			</div>
</template>

<script>
	import { fetchCategories,fetchArticleList } from "api";
	import { mapActions } from 'vuex';
	export default {
		name: 'category',
    data(){
		return{
			categories:[],
		}
	},
	computed:{
		//计算分类下的文章数
		getCategoryTittle:()=>{
			return function(num){
			let total = this.$i18n.messages[this.$i18n.locale].home.total
			let piece = this.$i18n.messages[this.$i18n.locale].home.piece
			return  total + '【'+ num + '】' + piece
			}
		},
	},
	methods: {
	...mapActions(['setHasNextPage']),
	//方法：将当前标签的名字传给父组件(根据路由中的参数slug),由点击事件触发。
	getCategoryName(slug){
		for (let index=0;index<this.categories.length;index++){
				if (this.categories[index].slug == slug){
					// console.log(this.categories[index].name)
					this.$emit('getResNameF',this.categories[index].name);
					break;
				}
			}
	},
	//查询所有分类，传给父组件
	getCategories() {
            fetchCategories().then(res => {
                this.categories = res.data || []
				// console.log(this.categories)
				//如果当前已经在分类页面，获取分类名传给父组件
				let slug = this.$route.params.slug;
				if (slug && this.$route.params.res=='category'){
					this.getCategoryName(slug);
				}
            }).catch(err => {
                console.log(err)
            })
        },
	//通过标签查询文章传给父组件
	fetchArticleByCategory(){
		// console.log(this.$route.meta.res)
		let params = {
			res: this.$route.params.res,
			slug: this.$route.params.slug,
			sort: '-create_date'
		}
		 fetchArticleList(params).then(res => {
            let articlecategoryData = res || [];
			// console.log("articlecategoryList, "+articlecategoryList);
			// setDateFormat(articlecategoryList)
			if (JSON.stringify(articlecategoryData.data) == "{}" || articlecategoryData.data.length < 10){
				this.setHasNextPage(false)
			}
			else{
				this.setHasNextPage(true)
			}
			this.$emit('getArticleByResF',articlecategoryData);
        }
		).catch(err => {
            console.log(err)
        })
	},
	//通过点击事件传给组件的信息
	clickSendInfo:function(event){
		let el = event.currentTarget;
		// console.log(el.getElementsByTagName('a')[0].innerHTML)
		this.$emit('getResNameF',el.getElementsByTagName('a')[0].innerHTML);
		// let slug = this.$route.params.slug;
		if(this.$route.params.res=='category'){
			this.fetchArticleByCategory();
		}
	},
	initCategoryArticles(){
		//初始化数据,查询所有分类
		this.getCategories();
		//初始化数据,创建时slug存在，才执行查找接口
		if(this.$route.params.slug){
			this.fetchArticleByCategory();
		}
	},

	},
	mounted(){
		
	},
	created(){
		this.initCategoryArticles();
	},

}
</script>

<style lang="scss" scoped>


</style>